import * as Cesium from 'cesium/Cesium'
import TransformEditorViewModel from "./transformEditor/TransformEditorViewModel";

var e = Cesium;

function createDomNode(e) {
    var t = document.createElement("div");
    return t.innerHTML = e,
        1 === t.children.length ? t.removeChild(t.firstChild) : t
}

var html$3 = '<div class="transform-editor-menu" data-bind="style: {left: left, top: top}, visible: active">        <div class="cesium-button transform-editor-button" data-bind="click: expandMenu, visible: !menuExpanded">            <svg width="20" height="20" viewBox="0 0 20 20">                <g>                    <circle cx="2" cy="10" r="2" />                    <circle cx="10" cy="10" r="2" />                    <circle cx="18" cy="10" r="2" />                </g>            </svg>        </div>        <div class="transform-editor-options" data-bind="visible: menuExpanded">            <div class="transform-editor-button-row">                <div title="Translation" data-bind="click: setModeTranslation, css: {selected: editorMode === \'translation\'}">                    <svg viewBox="0 0 25 25" height="25" width="25">                        <g>                            <circle r="3" cy="22" cx="3" />                            <path d="M 19.543379,4.59439 3.9750205,19.96158 5.3793174,21.3854 20.947676,6.01822 Z"/>                            <path d="m 14.699824,3.80366 10.231411,-3.34922 -3.215586,10.03096 z"/>                        </g>                    </svg>                </div                ><div title="Rotation" data-bind="click: setModeRotation, css: {selected: editorMode === \'rotation\'}">                    <svg viewBox="0 0 25 25" height="25" width="25">                        <g>                            <path d="M 13.033371,10.08295 2.6713568,7.16272 10.931013,0.62527 Z"/>                            <path d="m 13.741358,3.87055 c -0.747592,-0.006 -1.506137,0.0593 -2.263621,0.20287 l 0.484334,2.29127 c 4.712769,-0.89305 9.471467,2.11386 10.414021,6.57912 0.942553,4.46525 -2.229345,8.97402 -6.942115,9.86707 -4.71277,0.89305 -9.4731664,-2.11226 -10.4157205,-6.57752 l -2.4165696,0.45729 c 1.2119755,5.74161 7.2550484,9.55981 13.3149241,8.41149 6.059877,-1.14833 10.089725,-6.87562 8.87775,-12.61723 -1.060479,-5.02391 -5.819851,-8.57436 -11.053003,-8.61436 z"/>                        </g>                    </svg>               </div>            </div>            <div class="transform-editor-button-row">                <div title="Scale" data-bind="click: setModeScale, css: {selected: editorMode === \'scale\'}">                    <svg width="25" height="25" viewBox="0 0 25 25">                        <g>                            <path d="M 19.543379,4.59439 3.9750205,19.96158 5.3793174,21.3854 20.947676,6.01822 Z"/>                            <path d="m 14.699824,3.80366 10.231411,-3.34922 -3.215586,10.03096 z" />                            <path d="M 10.333866,21.9809 0.10245523,25.33012 3.3180412,15.29916 Z" />                        </g>                    </svg>                </div                ><div data-bind="click: toggleNonUniformScaling">                    <div title="Switch to non-uniform scaling" data-bind="visible: !enableNonUniformScaling">                        <svg width="25" height="25" viewBox="0 0 25 25">                            <g>                                <path d="m 0.5,1.38477 h 1.9960938 v -1 H 0.5 c 0,0.33333 0,0.66667 0,1 z m 2.9941406,0 h 1.9980469 v -1 H 3.4941406 Z m 2.9960938,0 h 1.9960937 v -1 H 6.4902344 Z m 2.9960937,0 h 1.9960939 v -1 H 9.4863281 Z m 2.9941409,0 h 1.998047 v -1 h -1.998047 z m 2.996093,0 h 1.996094 v -1 h -1.996094 z m 2.994141,0 h 1.998047 v -1 h -1.998047 z m 2.996094,0 h 1.998047 v -1 h -1.998047 z m 2.535156,-0.5 v 1.95898 H 25 v -1.95898 z M 0,4.0332 h 0.99804688 v -1.99609 H 0 Z m 24.001953,1.80469 H 25 V 3.8418 H 24.001953 Z M 0,7.0293 h 0.99804688 v -1.99805 H 0 Z m 24.001953,1.80468 H 25 v -1.99609 H 24.001953 Z M 0,10.02344 h 0.99804688 v -1.9961 H 0 Z m 24.001953,1.80664 H 25 v -1.99805 H 24.001953 Z M 0,13.01953 h 0.99804688 v -1.99609 H 0 Z m 24.001953,1.80469 H 25 v -1.9961 H 24.001953 Z M 0,16.01562 h 0.99804688 v -1.99804 H 0 Z m 24.001953,1.80469 H 25 v -1.99804 H 24.001953 Z M 0,19.00977 h 0.99804688 v -1.9961 H 0 Z m 24.001953,1.80664 H 25 v -1.99805 H 24.001953 Z M 0,22.00586 h 0.99804688 v -1.99609 H 0 Z m 24.001953,1.80469 H 25 v -1.9961 H 24.001953 Z M 0,24.88672 v 0.49805 h 0.5 0.11523438 v -0.49805 h 0.3828125 v -1.88281 H 0 Z m 1.6132812,0.49805 H 3.609375 v -0.99805 H 1.6132812 Z m 2.9941407,0 h 1.9980469 v -0.99805 H 4.6074219 Z m 2.9960937,0 h 1.9980469 v -0.99805 H 7.6035156 Z m 2.9960934,0 h 1.996094 v -0.99805 h -1.996094 z m 2.994141,0 h 1.998047 v -0.99805 H 13.59375 Z m 2.996094,0 h 1.996094 v -0.99805 h -1.996094 z m 2.996094,0 h 1.996093 v -0.99805 h -1.996093 z m 2.99414,0 H 24.5 25 v -0.49805 -0.0781 h -0.5 v -0.42187 h -1.919922 z" />                                <path d="m 0,10.38477 v 1.02343 13.97657 h 15 v -15 z m 2.0449219,2.04492 H 12.955078 V 23.3418 H 2.0449219 Z"/>                                <g>                                    <path d="m 21.158203,3.81836 0.355469,0.35156 0.351562,-0.35547 -0.353515,-0.35156 z m -0.703125,0.70898 0.355469,0.35157 0.351562,-0.35352 -0.355468,-0.35351 z m -0.705078,0.71094 0.355469,0.35156 0.351562,-0.35546 -0.353515,-0.35157 z m -0.703125,0.70899 0.355469,0.35351 0.351562,-0.35547 -0.355468,-0.35156 z m -0.705078,0.71093 0.355469,0.35157 0.353515,-0.35547 -0.355469,-0.35157 z m -0.703125,0.71094 0.355469,0.35156 0.351562,-0.35547 -0.355469,-0.35156 z m -0.703125,0.70898 0.353515,0.35157 0.353516,-0.35352 -0.355469,-0.35351 z m -0.705078,0.71094 0.355469,0.35156 0.351562,-0.35546 -0.355469,-0.35157 z m -0.703125,0.70899 0.353515,0.35351 0.353516,-0.35547 -0.355469,-0.35351 z m -0.705078,0.71093 0.355468,0.35157 0.351563,-0.35547 -0.355469,-0.35156 z"/>                                    <path d="m 23.382049,1.93037 -1.015775,3.8652 -2.840556,-2.81624 z"/>                                </g>                            </g>                        </svg>                    </div>                    <div title="Switch to uniform scaling" data-bind="visible: enableNonUniformScaling">                        <svg width="25" height="25" viewBox="0 0 25 25">                            <g>                                <path d="M 0.49414062,10.87891 H 0 v 1.95117 h 0.98828125 v -1.45703 H 2.4707031 v -0.98828 H 0.49414062 Z m 2.96289058,0.49414 h 1.9765626 v -0.98828 H 3.4570312 Z m 2.9648438,0 h 1.9765625 v -0.98828 H 6.421875 Z m 2.9628906,0 h 1.9765624 v -0.98828 H 9.3847656 Z m 2.9648434,0 h 1.976563 v -0.98828 h -1.976563 z m 2.964844,0 h 1.974609 v -0.98828 h -1.974609 z m 2.962891,0 h 1.976562 v -0.98828 h -1.976562 z m 2.964844,0 h 1.974609 v -0.98828 h -1.974609 z m 2.96289,-0.49414 h -0.193359 v 1.67578 H 25 v -1.67578 -0.49414 h -0.494141 -0.300781 z m -0.193359,4.63867 H 25 v -1.97461 H 24.011719 Z M 0,15.79297 h 0.98828125 v -1.97461 H 0 Z m 24.011719,2.68945 H 25 v -1.97656 H 24.011719 Z M 0,18.75781 h 0.98828125 v -1.97656 H 0 Z m 24.011719,2.6875 H 25 V 19.4707 H 24.011719 Z M 0,21.7207 h 0.98828125 v -1.97461 H 0 Z m 24.011719,2.68946 H 25 v -1.97657 H 24.011719 Z M 0,24.68555 h 0.98828125 v -1.97657 H 0 Z m 1.2753906,0.69922 h 1.9765625 v -0.98829 H 1.2753906 Z m 2.9648438,0 h 1.9765625 v -0.98829 H 4.2402344 Z m 2.9628906,0 h 1.9765625 v -0.98829 H 7.203125 Z m 2.964844,0 h 1.976562 v -0.98829 h -1.976562 z m 2.96289,0 h 1.976563 v -0.98829 h -1.976563 z m 2.964844,0 h 1.976563 v -0.98829 h -1.976563 z m 2.962891,0 h 1.976562 v -0.98829 h -1.976562 z m 2.964844,0 H 24 v -0.98829 h -1.976562 z"/>                                <path d="m 0,10.38477 v 1.02343 13.97657 h 15 v -15 z m 2.0449219,2.04492 H 12.955078 V 23.3418 H 2.0449219 Z"/>                                <g>                                    <path d="m 22.251953,18.26172 h 0.179688 l -0.0039,-0.5 h -0.179687 z m -1.003906,-0.49024 0.0039,0.5 0.5,-0.004 -0.0039,-0.5 z m -1,0.008 0.0039,0.5 0.5,-0.004 -0.0039,-0.5 z m -1,0.01 0.0039,0.5 0.5,-0.006 -0.0039,-0.5 z m -1,0.008 0.0039,0.5 0.5,-0.004 -0.0039,-0.5 z m -1,0.008 0.0039,0.5 0.5,-0.004 -0.0039,-0.5 z m -1,0.01 0.0039,0.5 0.5,-0.004 -0.0039,-0.5 z m -1,0.008 0.0039,0.5 0.5,-0.004 -0.0039,-0.5 z"/>                                    <path d="m 23.885095,18.00809 -2.030696,1.17348 -0.02037,-2.31243 z"/>                                </g>                            </g>                        </svg>                    </div>                </div>            </div>        </div>    </div>';

function TransformEditor(e) {
    try {
        var t = Cesium.getElement((e = Cesium.defaultValue(e, Cesium.defaultValue.EMPTY_OBJECT)).container)
            , i = createDomNode(html$3);
        t.appendChild(i);

        var r = new TransformEditorViewModel(e);
        Cesium.knockout.applyBindings(r, i),
            this._viewModel = r,
            this._element = i,
            this._container = t

    } catch (e) {
        console.dir(e)
    }

}


// function TransformPanel(e,tileset) {
//     var axisAsset =  new  AxisAsset(e,this);
//     axisAsset.assetId = tileset;
//     this.ready = !1, this._tileset = void 0, this._scene = void 0, this._domReady = !1, this._geocoder = void 0, this._position = new e.Cartesian3, this._headingPitchRoll = new e.HeadingPitchRoll, this._scale = new e.Cartesian3, this._initialValues = void 0, this._pending = !1, this.picking = !1, this._longitude = 0, this._latitude = 0, this._height = 0, this._heading = 0, this._pitch = 0, this._roll = 0, this._scaleUniform = 0, this._scaleX = 0, this._scaleY = 0, this._scaleZ = 0, this.enableNonUniformScaling = !1, this.errorMessage = ""
// }
// Cesium.defineProperties(TransformPanel.prototype, {
//     styles: {
//         get: function() {
//             return {
//                 ready: {type: Boolean},
//                 assetId: {type: Number},
//                 enableNonUniformScaling: {type: Boolean},
//                 picking: {type: Boolean},
//                 longitude: {type: Number},
//                 latitude: {type: Number},
//                 height: {type: Number},
//                 heading: {type: Number},
//                 pitch: {type: Number},
//                 roll: {type: Number},
//                 scaleUniform: {type: Number},
//                 scaleX: {type: Number},
//                 scaleY: {type: Number},
//                 scaleZ: {type: Number},
//                 errorMessage: {type: String}
//             }
//         }
//     },
//     properties: {
//         get: function() {
//             return {
//                 ready: {type: Boolean},
//                 assetId: {type: Number},
//                 enableNonUniformScaling: {type: Boolean},
//                 picking: {type: Boolean},
//                 longitude: {type: Number},
//                 latitude: {type: Number},
//                 height: {type: Number},
//                 heading: {type: Number},
//                 pitch: {type: Number},
//                 roll: {type: Number},
//                 scaleUniform: {type: Number},
//                 scaleX: {type: Number},
//                 scaleY: {type: Number},
//                 scaleZ: {type: Number},
//                 errorMessage: {type: String}
//             }
//         }
//     }
// }),

class Panel {

}

class TransformPanel extends Panel {

    constructor(i) {
        super(),
            // this._transformPanel = t,
            this._mapViewer = {viewer: i}, this._assetId = void 0, this._tilesetShow = void 0, this._tileset = void 0, this._transformEditor = void 0, this._transformEditorSubscription = [], this._unsavedChanges = !1, this._sseh = void 0, this._position = new e.Cartesian3, this._headingPitchRoll = new e.HeadingPitchRoll, this._scale = new e.Cartesian3, this._setViewModelPosition = this._setViewModelPosition.bind(this), this._setViewModelHpr = this._setViewModelHpr.bind(this), this._setViewModelScale = this._setViewModelScale.bind(this), this._setViewModelNonUniformScaling = this._setViewModelNonUniformScaling.bind(this), this._handlePicking = this._handlePicking.bind(this), this._save = this._save.bind(this)
    }

    get assetId() {
        return this._assetId
    }

    set assetId(t) {
        if (this._assetId === t) return;
        if (this._assetId = t, !e.defined(t)) return e.defined(this._tileset)
        && (this._tileset.show = this._tilesetShow),
            this._tileset = void 0,
            // this._transformPanel.ready = !1,
            void this._deactivate();
        const i = t;
        // const i = this._mapViewer.getAssetInstance(t);
        this._tileset = i, this._tilesetShow = i.show, i.show = !0;
        const n = this._mapViewer.viewer;

        i.readyPromise.then(t => {
            let i;

            // e.Matrix4.equals(t._root.transform, e.Matrix4.IDENTITY)
            //     ? i = t.modelMatrix : (i = e.Matrix4.clone(t._root.transform), t._root.transform = e.Matrix4.IDENTITY, t.modelMatrix = i);
            // console.log(t);
            try {

                const o = new TransformEditor({
                    container: n.container,
                    scene: n.scene,
                    transform: t.modelMatrix,
                    boundingSphere: t.boundingSphere
                }), r = o._viewModel;
                this._transformEditor = o, this._position = e.Cartesian3.clone(r.position, this._position),
                    this._headingPitchRoll = e.HeadingPitchRoll.clone(r.headingPitchRoll, this._headingPitchRoll),
                    this._scale = e.Cartesian3.clone(r.scale, this._scale)
                    , this._initialize()

            } catch (e) {
                console.dir(e)
            }
        })
    }

    _initialize() {
        const t = this._transformEditorSubscription,
            i = this._tileset, n = this._transformEditor._viewModel,
            o = this._transformPanel, r = this._position,
            a = this._headingPitchRoll, s = this._scale;
        n.activate(),
            // o.initializeValues(this._mapViewer.viewer, i, r, a, s, n.enableNonUniformScaling),
            t.push(e.knockout.getObservable(n, "position").subscribe((function (t) {
                console.dir(t);
                e.Cartesian3.equalsEpsilon(t, r, e.Math.EPSILON8) || (e.Cartesian3.clone(t, r), this._unsavedChanges = !0
                    // ,o.position = t
                )
            }))), t.push(e.knockout.getObservable(n, "headingPitchRoll").subscribe((function (t) {
            console.dir(t);
            e.HeadingPitchRoll.equals(t, a) || (e.HeadingPitchRoll.clone(t, a), this._unsavedChanges = !0
                // , o.headingPitchRoll = t
            )
        }))), t.push(e.knockout.getObservable(n, "scale").subscribe((function (t) {
            console.dir(t);
            e.Cartesian3.equals(t, s) || (e.Cartesian3.clone(t, s), this._unsavedChanges = !0
                // , o.scale = t
            )
        }))), t.push(e.knockout.getObservable(n, "enableNonUniformScaling").subscribe((function (e) {
            // o.enableNonUniformScaling = e
        })))
        // o.addEventListener("positionChange", this._setViewModelPosition),
        // o.addEventListener("headingPitchRollChange", this._setViewModelHpr),
        // o.addEventListener("scaleChange", this._setViewModelScale),
        // o.addEventListener("enableNonUniformScalingChange",
        //     this._setViewModelNonUniformScaling),
        // o.addEventListener("pickingChange", this._handlePicking),
        // o.addEventListener("save", this._save)
    }

    _handlePicking(t) {
        const i = this._mapViewer.viewer.scene;
        if (t.detail.picking) {
            if (e.defined(this._sseh)) return;
            const t = new e.ScreenSpaceEventHandler(i.canvas);
            this._sseh = t, t.setInputAction(t => {
                const n = i.camera.getPickRay(t.position, Oi), o = i.globe.pick(n, i, $i);
                e.defined(o) && (this._transformPanel.position = o, this._transformEditor.viewModel.position = o, this._unsavedChanges = !0, this._transformPanel.cancelPicking())
            }, e.ScreenSpaceEventType.LEFT_CLICK)
        } else e.defined(this._sseh) && (this._sseh.destroy(), this._sseh = void 0)
    }

    _setViewModelPosition(t) {
        const i = t.detail.position, n = this._position;
        e.Cartesian3.equalsEpsilon(i, n, e.Math.EPSILON8) || (e.Cartesian3.clone(i, n), this._unsavedChanges = !0, this._transformEditor.viewModel.position = i)
    }

    _setViewModelHpr(t) {
        const i = t.detail.headingPitchRoll, n = this._headingPitchRoll;
        e.HeadingPitchRoll.equals(i, n) || (e.HeadingPitchRoll.clone(i, n), this._unsavedChanges = !0, this._transformEditor.viewModel.headingPitchRoll = i)
    }

    _setViewModelScale(t) {
        const i = t.detail.scale, n = this._scale;
        e.Cartesian3.equals(i, n) || (e.Cartesian3.clone(i, n), this._unsavedChanges = !0, this._transformEditor.viewModel.scale = i)
    }

    _setViewModelNonUniformScaling(e) {
        this._transformEditor.viewModel.enableNonUniformScaling = e.detail.enableNonUniformScaling
    }

    _save() {
        dt.dispatch(Ue(this._assetId, this._tileset.modelMatrix))
    }

    _deactivate() {
        if (this._transformEditorSubscription.forEach((function (e) {
            e.dispose()
        })), e.defined(this._transformEditor) && this._transformEditor.destroy(), e.defined(this._transformPanel)) {
            const e = this._transformPanel;
            e.removeEventListener("positionChange", this._setViewModelPosition), e.removeEventListener("headingPitchRollChange", this._setViewModelHpr), e.removeEventListener("scaleChange", this._setViewModelScale), e.removeEventListener("enableNonUniformScalingChange", this._setViewModelNonUniformScaling), e.removeEventListener("pickingChange", this._handlePicking), e.removeEventListener("save", this._save)
        }
    }
}

window.customElements.define("transform-editor-panel", TransformPanel);

export default TransformPanel;